import { OperateBase } from '../../common/operate-base';
import './border.less'
import { FullColorPannel } from '../../common/full-color-pannel';
import { downIcon } from '../../common/vars';
import { NBorder } from '../../../types/style.interface';
import { BorderPlugin } from '../../../pugins/border.plugin';
// <div class="z-tools-icon icon iconfont icon-align-left"></div>
type BorderType = 'all'|'outer'|'inner'|'none'|'top'|'right'|'bottom'|'left';
export class Border extends OperateBase {
    protected container: HTMLElement;
    protected currentColor: string = '000000';
    protected plugin: BorderPlugin;
    protected iconMap: {[key: string]: number} = {
        'icon-align-left':0,
        'icon-align-center':1,
        'icon-align-right':2
    }
    constructor() {
        super();
    }
    public selectChange() {

    }
    public afterDomInit(): void {
        this.plugin = this.zTableInstance.pluginManager.getPlugin(BorderPlugin.pluginName);
        this.zTableInstance.getHook().afterSelect.add((val) => {
            this.toggleDisabled(val !== null);
            this.disabled = val === null;
        });
        this.toggleDisabled(false);
    }
    protected toggleDisabled(isDisabled: boolean) {
        let ele: HTMLElement = this.container.querySelector('.iconfont');
        let btn: HTMLElement = this.container.querySelector('.z-tools-btn');
        this.disabled = !isDisabled;
        if(!isDisabled) {
            ele.classList.add('z-table-icon-disabled');
            btn.classList.add('z-drop-down-disabled');
        } else {
            ele.classList.remove('z-table-icon-disabled');
            btn.classList.remove('z-drop-down-disabled');
        }
    }
    public getDom() {
        this.container = document.createElement('div');
        this.container.setAttribute('class', this.containerClassName);
        this.container.innerHTML=`
            <div class="z-table-tools-font-h z-table-boder">
                <div class="z-tools-btn">
                    <div class="z-tools-icon icon iconfont icon-border-outer"></div>
                    <div class="icon-down"></div>
                </div>
                <div class="options">
                    <div class="border-select">
                        <div class="icon iconfont icon-border-all" border-type="all"></div>
                        <div class="icon iconfont icon-border-outer" border-type="outer"></div>
                        <div class="icon iconfont icon-border-inner" border-type="inner"></div>
                        <div class="icon iconfont icon-border-none" border-type="none"></div>
                        <div class="icon iconfont icon-border-top" border-type="top"></div>
                        <div class="icon iconfont icon-border-right" border-type="right"></div>
                        <div class="icon iconfont icon-border-bottom" border-type="bottom"></div>
                        <div class="icon iconfont icon-border-left" border-type="left"></div>
                    </div>
                    <div class="border-color-select-item z-color-select-parent">
                        <div class="icon iconfont icon-pen"></div>
                        <div class="border-color-select-item-desc">边框颜色</div>
                        <div class="z-down-icon">
                            ${downIcon}
                        </div>
                        <div class="child-options">
                        </div>
                    </div>
                    <div class="border-color-select-item">
                        <div class="icon iconfont icon-line-style"></div>
                        <div class="border-color-select-item-desc">边框样式</div>
                        <div class="z-down-icon">
                            ${downIcon}
                        </div>
                    </div>
                </div>
            </div>
        `;
        let tpl: any = document.createDocumentFragment();
        tpl.appendChild(this.container);
        let colorContainer: HTMLElement = this.container.querySelector('.z-color-select-parent .child-options');
        let fullColorPannel = new FullColorPannel((color) => {
            console.log(color);
            (this.container.querySelector('.icon-pen') as HTMLElement).style.color = color;
            this.currentColor = color;
        });
        // let optionsContainer = this.container.querySelector('.options');
        colorContainer.append(fullColorPannel.getDom());
        let optionContainer = this.container.querySelector('.options') as HTMLElement;
        this.container.querySelectorAll('.border-select .icon').forEach(item => {
            item.addEventListener('click', (e) => {
                let borderType: BorderType = (e.target as HTMLElement).getAttribute('border-type') as any;
                let border = {
                    color: this.currentColor, 
                    type: NBorder.EBorderType.solid,
                    width: 1
                }
                switch(borderType) {
                    case 'all':
                        this.plugin.setBorder('all', border);
                        break;
                    case 'outer':
                        this.plugin.setBorder('outer', border);
                        break;
                    case 'inner':
                        this.plugin.setBorder('inside', border);
                        break;
                    case 'none':
                        this.plugin.setBorder('none', border);
                        break;
                    case 'top':
                        this.plugin.setBorder('top', border);
                        break;
                    case 'right':
                        this.plugin.setBorder('right', border);
                        break;
                    case 'bottom': 
                        this.plugin.setBorder('bottom', border);
                        break;
                    case 'left':
                        this.plugin.setBorder('left', border);
                        break;
                    default:
                        console.error(borderType);
                }
                // console.log(e.target);
            });
        })
        document.addEventListener('click', () => {
            optionContainer.style.display = 'none';
        });
        this.container.addEventListener('click', (e) => {
            e.stopPropagation();
            e.preventDefault();
        })
        this.container.querySelector('.icon-down').addEventListener('click', (e) => {
            optionContainer.style.display = 'block';
            this.currentColor = '000000';
            (this.container.querySelector('.icon-pen') as HTMLElement).style.color = '#000000';
            e.stopPropagation();
            e.preventDefault();
        });
        return tpl;
    }
    protected changeActive(val: number) {
        let iconEle = this.container.querySelector('.z-tools-icon').classList;
        let activeKey = '';
        for(let key in this.iconMap) {
            iconEle.remove(key);
            if(this.iconMap[key] === val) {
                activeKey = key;
            }
        }
        iconEle.add(activeKey);
        let optionsNodes = this.container.querySelectorAll('.font-h-item');
        optionsNodes.forEach(item => {
            if(Number(item.getAttribute('EHorizontally')) === val) {
                item.classList.add('font-h-item-active');
            } else {
                item.classList.remove('font-h-item-active');
            }
        })
    }
}